<script>
// 数据详情页
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import * as echarts from 'echarts'
import { dateTypes } from '@/utils'
import { staffListData } from '@/data'
import MyIcon from '@/components/my-icon/index.vue'
import { ref, onMounted } from 'vue'
import {reqGroupDetailMap} from '@/api'
import { toRaw } from '@vue/reactivity'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
	reqQrTableData()
}
const chooseDialogue = ref(null)

const queryForm = ref({
	 "chat_id":'',
    "type":1,
    "sktime":"",
    "dtime":"",
})

const selfTime = ref([])
const dateTypeList = ref([])
dateTypeList.value = dateTypes
const staffList = ref([])
staffList.value = staffListData
const createTime = ref(0)
const show = (ids,createTime1)=>{
	queryForm.value.chat_id = ids
	createTime.value = createTime1

	reqQrChartData()
}

const disabledDateFun = (time) => {
  console.log(time); // time 为new Date()类型
  if (time.getTime() > new Date().getTime() - 1 * 8.64e7) {
		// 右边
    return time.getTime() > new Date().getTime() - 1 * 8.64e7; //时间范围必须是时间戳
  } else {
		// 左边
		console.log(new Date().getTime(),createTime.value,'tyututyuytu')
    return time.getTime() < createTime.value; //8.64e7就是一天的时间戳 24*60*60*1000   两天之内 根据自己需求来定
	}
}
const reqQrChartData = async() =>{
	if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	
	const r = await reqGroupDetailMap(queryForm.value)
	let xData = []
	let yData = []
	if(r){
		r.data.forEach(item=>{
			xData.push(item.time)
			yData.push(item.size)
		})
		
	}
	let myChart = echarts.init(document.getElementById('myChart123'))
	// 绘制图表
	myChart.setOption({
		xAxis: {
			data: xData
		},
		yAxis: {},
		series: [
			{
				name: queryForm.value.type==1?'总人数':queryForm.value.type==2?'客户总数':queryForm.value.type==3?'入群人数':'退群人数',
				type: 'line',
				data: yData,
				itemStyle: {
					borderRadius: [0, 5, 5, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				}
				// areaStyle:{
				// 	color:'#1890ff',
				// },
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}
}
defineExpose({
	show
})
onMounted(async() => {
	
	
})
</script>

<template>
	<div class="app-edit app-gap-block-top">
		<div class="app-container">
			<div class="table-title app-flex-left">
				图表数据<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
					<div class="app-container">
						<div>1、客户总数：扫码添加的客户总数，若客户重复添加将不会重复计数</div>
						<div>2、新增客户数：扫码添加的新增客户数，包含流失数据</div>
						<div>3、流失客户数：扫码添加后将成员删除的客户数</div>
					</div>
					<template #reference>
						<MyIcon class="question-icon app-words-tip-weak" name="Question" />
					</template>
				</el-popover>
			</div>
			<div class="app-gap-block-top">
				<div>
					<el-radio-group v-model="queryForm.type" @change="reqQrChartData" size="large">
						<el-radio-button :label="1">总人数</el-radio-button>
						<el-radio-button :label="2">客户总数</el-radio-button>
						<el-radio-button :label="3">入群人数</el-radio-button>
						<el-radio-button :label="4">退群人数</el-radio-button>
					</el-radio-group>
				</div>
				<div class="app-gap-block-top app-flex-left">
					<el-date-picker
					style="max-width:300px"
					@change="reqQrChartData"
						v-model="selfTime"
						type="daterange"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
						:disabledDate="disabledDateFun"
					/>
				
<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
				</div>

				<div class="app-gap-block-top">
					<div id="myChart123" :style="{ width: '100%', height: '550px' }"></div>
				</div>
			</div>
		</div>

		<div></div>
	</div>
</template>
<style lang="scss">
@import url('../../../../../style/app-component.scss');
</style>
